<template>
	<view class="content">
		<view class="nav">
			<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<!-- 选项卡类别列表 -->
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
							{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
		<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item"  v-for="(item,index) in applyList" :key="index">
						<view class="applay-info-box" v-if="item.state==0 && Date.parse(item.endTime)>new Date()"  @click="goAppling(item.id)">
							<view class="info-hd">
							  <view class="user-title" >
								<view>
									<text class="applay1">{{item.accessType}}</text>
								</view>
								<view>
									<text class="applay1">花都赤坭校区-学校正门</text>
								</view>
								<view>
									<text class="applay11">权限有效时间：{{item.startTime}}---{{item.endTime}}</text>
								</view>
								<view>
									<text class="applay11">申请时间：{{item.startTime}}</text>
								</view>
								<view>
									<text class="applay11">申请原因：{{item.reason}}</text>
								</view>
							  </view>
							</view>
						</view>
					</view>
				</scroll-view>	
			</swiper-item>
			
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">	
					<view class="nav_item"  v-for="(item,index) in applyList" :key="index">
						<view class="applay-info-box" v-if="item.state==1 && Date.parse(item.endTime)>new Date()" @click="goAppling(item.id)">
							<view class="info-hd">
							  <view class="user-title"  >
								<view>
									<text class="applay1">{{item.accessType}}</text>
								</view>
								<view>
									<text class="applay1">花都赤坭校区-学校正门</text>
								</view>
								<view>
									<text class="applay11">权限有效时间：{{item.startTime}}---{{item.endTime}}</text>
								</view>
								<view>
									<text class="applay11">申请时间：{{item.startTime}}</text>
								</view>
								<view>
									<text class="applay11">申请原因：{{item.reason}}</text>
								</view>
							  </view>
							</view>
						</view>
					</view>
				</scroll-view>	
			</swiper-item>
			
			<swiper-item class="swiperitem-content">
				<scroll-view scroll-y style="height: 100%;">
					<view class="nav_item" v-for="(item,index) in applyList" :key="index">
						<view class="applay-info-box" v-if="item.state !=='' && Date.parse(item.endTime)<new Date()" @click="goAppling(item.id)">
							<view class="info-hd">
							  <view class="user-title" >
								<view>
									<text class="applay1">{{item.accessType}}</text>
								</view>
								<view>
									<text class="applay1">花都赤坭校区-学校正门</text>
								</view>
								<view>
									<text class="applay11">权限有效时间：{{item.startTime}}---{{item.endTime}}</text>
								</view>
								<view>
									<text class="applay11">申请时间：{{item.startTime}}</text>
								</view>
								<view>
									<text class="applay11">申请原因：{{item.reason}}</text>
								</view>
							  </view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			
		</swiper>
	</view>
</template>
<script>
	export default {
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {	
			return {
				isActive: 0,
				index: 0,
				currentindex:0,
				category:[//状态导航栏
					{
						id:1,
						name:'审核中',
					},
					{
						id:2,
						name:'审核通过',
					},
					{
						id:3,
						name:'已失效',
					}
				],
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",
				applyList:[],
				sid:""
			}
		},
		created() {
			this.sid=uni.getStorageSync("userinfo").sid
			console.log(this.sid)
			this.getApllyList(this.sid)
		},
		mounted() {
			var that = this;
			 //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
			uni.getSystemInfo({
			      success: function (res) {
				         that.fullHeight ="height:" + res.windowHeight + "px";
				  }
				});
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			// 获取用户申请记录
			getApllyList(sid){
				uni.request({
					url: `http://localhost:8090/leave/info`,
					method: 'GET',
					data:{sid:sid},
					success: (res) => {
						console.log("申请请假信息：",res);
						this.applyList = res.data.data
					},
					fail:(res)=> {
						console.log("失败",res);
					},	
				});
			},
			// 跳到相应请假申请页面
			goAppling(id) {
				uni.navigateTo({
					url: '../apply/appling?id='+id
			
				})
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			},	
		}
	}
</script>
<style lang="scss">
	page{
		height: 100%;
		display: flex;
	}
	.content{
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		.nav{
			position: fixed;
			top: 44px;
			// #ifdef APP-PLUS
			top: 0px;
			// #endif
			background-color: #fff;
			z-index: 999;
			width: 100%;
			height: 85rpx;
			line-height: 70rpx;
			color: black;
			border-bottom: 1px solid #eee;
				.tab-scroll_box{
					width: 100%;
					height: 85rpx;
					line-height: 80rpx;
					white-space: nowrap;
					.tab-scroll_item{
						text-align: center;
						display: inline-block;
						width: 100rpx;
						box-sizing: border-box;
						margin-left: 65rpx;
						margin-right: 45px;
						font-size: 35rpx;
					}

			}
		}
		.swiper-content{
			   padding-top: 120rpx;
			   flex: 1;
			.swiperitem-content{
			    background-color: #ffffff;
				.nav_item{	
					background-color: #FFFFFF;
					padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}	
	}
	.active {
		position: relative;
		color: #0f8bff;
		font-weight: 600;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 130rpx;
		height: 4rpx;
		background-color: #0f8bff;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
.info-hd {
  display: flex;
  align-items: center;
}
.applay-info-box{
	margin: 15rpx;
}
.applay1{
	font-size: 12pt;
	font-weight: 700;
}
.applay11{
	font-size: 10pt;
	font-weight: 700;
	color: #b9b8be;
	margin-right: 35px;
}
.applay-info{
	margin-top: 30rpx;
	display: flex;
	background-color: #fff;
	min-height: 85rpx;
	border: 1px solid #b9b8be;
	flex-direction: column;
	padding: 35rpx 30rpx 25rpx;
}
</style>
 